<template>
	<view class="mytabbar">
		<block v-if="currentId == '1'">
			<view class="mytabbar-item active">
				<text class="iconfont icontongzhi"></text>
				<view class="mytabbar-item-lable">通知</view>
			</view>
		</block>
		<block v-else>
			<view class="mytabbar-item" @tap="tapTab" data-id="1">
				<text class="iconfont icontongzhi"></text>
				<view class="mytabbar-item-lable">通知</view>
			</view>
		</block>
		<view class="mytabbar-item" @tap="tapTab" data-id="2">
			<view class="myhome">
				<image class="myhome-img" src="/static/img/myhome.png" />
			</view>
			<view class="mytabbar-item-lable">我家</view>
		</view>
		<block v-if="currentId == '3'">
			<view class="mytabbar-item active">
				<text class="iconfont iconicon-test"></text>
				<view class="mytabbar-item-lable">设置</view>
			</view>
		</block>
		<block v-else>
			<view class="mytabbar-item" @tap="tapTab" data-id="3">
				<text class="iconfont iconicon-test"></text>
				<view class="mytabbar-item-lable">设置</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: ['currentId'],
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			tapTab(e) {
				let id = e.currentTarget.dataset.id
				switch (id) {
					case '1':
						uni.redirectTo({
							url: '/pages/index/index'
						})
						break
					case '2':
						this.$parent.showHome()
						break
					case '3':
						uni.redirectTo({
							url: '/pages/setting/setting'
						})
						break
					default:
						break
				}
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';  /* project id 1705280 */
		src: url('https://at.alicdn.com/t/font_1705280_otaltml7zrq.ttf') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 60rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icontemperature:before {
		content: "\e609";
	}

	.iconkecheng:before {
		content: "\e600";
	}

	.iconmenjinshuliang:before {
		content: "\e639";
	}

	.iconhuiyitongzhi:before {
		content: "\e60e";
	}

	.iconzuoyetongzhi:before {
		content: "\e60d";
	}

	.iconxiaoche:before {
		content: "\e6e5";
	}

	.iconchengjitongzhi:before {
		content: "\e60c";
	}

	.iconicon-test:before {
		content: "\e63f";
	}

	.icontongzhi:before {
		content: "\e60a";
	}

	.mytabbar {
		display: flex;
		width: 750rpx;
		height: 150rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		font-size: 60rpx;
	}

	.mytabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.mytabbar-item-lable {
		font-size: 30rpx;
		margin-top: 6rpx;
	}

	.myhome {
		display: flex;
		width: 120rpx;
		height: 120rpx;
		background-color: #fec901;
		border-radius: 80rpx;
		justify-content: center;
		align-items: center;
		margin-top: -56rpx;
	}

	.myhome-img {
		width: 60rpx;
		height: 60rpx;
	}

	.active {
		color: #fec901;
	}
</style>
